<script>
import {getPage, goodsTypeHandleAdd, goodsTypeHandleDelete, goodsTypeHandleUpdate} from "@/api/goodsType";
export default {
    data(){
        return {
            /*条件查询的条件*/
          form: {
              name: '',
              pageNum: 1,
              pageSize: 3,
              total:0,
              pages:0,
          },
            /*新增列表*/
           addGoodsType:{
              id:'',
              name:'',
              description:''
           },
            rules:{
                name: [
                    {required: true, trigger: "blur", message: "请输入您的商品类别名称"}
                ],
                description: [
                    {required: true, trigger: "blur", message: "请输入您的商品类别描述"}
                ],
            },
            /*展示商品类别的表*/
            tableData:[],
            title:"",
            dialogVisible:false,
        }
    },
    created() {
        let that = this
        that.selGetPage()
    },
    methods: {
        selByGoodsName(){
            let that = this
            that.form.pageNum= 1
            that.selGetPage(that.form);
        },
        selGetPage(){
            let that = this
            getPage(that.form).then((res) =>{
                if (res.code == 200){
                    console.log(res.data.records)
                    that.tableData = res.data.records
                    that.form.pageSize = res.data.size
                    that.form.pages = res.data.pages
                    that.form.total = res.data.total
                    // this.form.pageNum = res.data.current
                }else {
                    that.$message.error(res.msg)
                }
            })
        },
        resetting(){
            //刷新当前页面
            window.location.reload()
        },
        /*添加商品类别*/
        handleAdd(){
            let that = this
            that.dialogVisible = true
            that.reset();
            that.title = "添加商品类别"
        },
        goodsCreate(addGoodsType){
            let that =  this
            that.$refs[addGoodsType].validate((valid) =>{
                if (valid){
                    console.log(that.addGoodsType.id)
                    if (that.addGoodsType.id != 0){
                        goodsTypeHandleUpdate(that.addGoodsType).then(function (res) {
                            if (res.code == 200) {
                                that.$message.success("修改成功")
                                that.dialogVisible = false
                                that.selGetPage()
                            } else {
                                that.$message.error(res.mess)
                            }
                        })
                    }else {
                        goodsTypeHandleAdd(that.addGoodsType).then(function (res){
                            if (res.code == 200){
                                that.$message.success("添加成功")
                                that.dialogVisible = false
                                that.selGetPage()
                            }else {
                                that.$message.error("添加失败")
                            }
                        })
                    }
                }
            })
        },
        handleDelete(id){
            let that =  this
            this.$confirm('此操作将永久删除该商品类别, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                goodsTypeHandleDelete(id).then(function (res){
                    if (res.code == 200){
                        that.$message.success("删除成功")
                        that.selGetPage()
                    }else {
                        that.$message.success(res.mess);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        currentChange(val){
            let that = this
            that.form.pageNum = val
            that.selGetPage()
        },

        reset() {
            this.addGoodsType = {
                id: 0,
                name:"",
                description:""
            };
        },
        handleUpdate(row) {
            let that = this
            that.dialogVisible = true
            that.reset()
            that.title = "修改商品类别"
            that.addGoodsType.id = row.id
            that.addGoodsType.name = row.name
            that.addGoodsType.description = row.description
            console.log(that.addGoodsType)
        },
    }
}
</script>

<template>
  <div>
    <h4>基本信息</h4>
      <el-form :inline="true" :model="form" class="demo-form-inline" size="small" style="text-align: left;line-height: 38px">
          <el-form-item label="分类名称" style="font-weight: bold">
              <el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
          </el-form-item>
          <el-form-item>
          <el-button icon="el-icon-search" size="mini" type="primary" @click="selByGoodsName()">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" type="primary" plain @click="resetting()">重置</el-button>
          </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
              <el-button
                      type="primary"
                      plain
                      icon="el-icon-plus"
                      size="mini"
                      @click="handleAdd"
              >新增</el-button>
          </el-col>
      </el-row>
<h4>商品类别信息</h4>
      <!--展示数据-->
      <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
             >
          <el-table-column
                  prop="id"
                  align="center"
                  label="类别Id">
          </el-table-column>
          <el-table-column
                  prop="name"
                  label="类别名称"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="description"
                  label="类别描述"
                  align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                  <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-edit"
                          @click="handleUpdate(scope.row)"

                  >修改</el-button>
                  <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-delete"
                          @click="handleDelete(scope.row.id)"
                  >删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <el-pagination
              background
              layout="total,prev, pager, next,jumper"
              :total="form.total"
              :page-size="form.pageSize"
              :current-page="form.pageNum"
              @current-change="currentChange"
              >
      </el-pagination>

      <el-dialog
          :destroy-on-close="true"
              align="center"
              :title="title"
              :visible.sync="dialogVisible"
              width="30%"
              append-to-body>
          <el-form :model="addGoodsType" :rules="rules" ref="addGoodsType" label-width="90px" class="demo-ruleForm">
              <el-form-item label="商品类名" prop="name">
                  <el-input v-model="addGoodsType.name"></el-input>
              </el-form-item>
              <el-form-item label="商品描述" prop="description">
                  <el-input v-model="addGoodsType.description"></el-input>
              </el-form-item>
              <el-form-item style="margin: 0 0 0 150px;">
                  <el-button size="medium" type="primary" plain @click="dialogVisible=false">取消</el-button>
                  <el-button size="medium" type="primary"  @click="goodsCreate('addGoodsType')">确认</el-button>
              </el-form-item>
          </el-form>
      </el-dialog>



  </div>
</template>

<style scoped>

</style>